<template>
	<view class="create-ticket-container">
		<view class="page-header">
			<text class="title">创建工单</text>
			<text class="subtitle">请填写工单详细信息</text>
		</view>
		
		<view class="form-container">
			<view class="form-group">
				<text class="label">工单标题</text>
				<textarea class="textarea" placeholder="请输入工单标题" :value="formData.title" @input="onTitleInput" />
			</view>
			
			<view class="form-group">
				<text class="label">问题类型</text>
				<picker class="picker" mode="selector" :range="ticketTypes" @change="onTypeChange">
					<view class="picker-content">
						<text v-if="!formData.type" class="placeholder">请选择问题类型</text>
						<text v-else>{{ formData.type }}</text>
					</view>
				</picker>
			</view>
			
			<view class="form-group">
				<text class="label">问题描述</text>
				<textarea class="textarea" placeholder="请详细描述您遇到的问题" :value="formData.description" @input="onDescriptionInput" />
			</view>
			
			<view class="form-group">
				<text class="label">联系方式</text>
				<textarea class="textarea short-textarea" placeholder="请输入您的手机号码" :value="formData.contact" @input="onContactInput" />
			</view>
			
			<view class="form-group">
				<text class="label">服务地址</text>
				<textarea class="textarea short-textarea" placeholder="请输入服务地址" :value="formData.address" @input="onAddressInput" />
			</view>
			
			<view class="form-group">
				<text class="label">图片上传</text>
				<view class="upload-container">
					<view v-if="!formData.image" class="upload-area" @click="chooseImage">
						<text class="upload-icon">+</text>
						<text class="upload-text">上传图片</text>
					</view>
					<view v-else class="image-preview">
						<image :src="formData.image" class="preview-image" mode="aspectFill" @click="chooseImage"></image>
						<text class="remove-btn" @click="removeImage">删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="form-actions">
			<button class="submit-btn" @click="submitTicket">提交工单</button>
			<button class="cancel-btn" @click="goBack">取消</button>
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from '../../../utils/auth.js';
	import { createTicket } from '../../../apis/ticket.js';
	
	export default {
		data() {
			return {
				loading: false,
				formData: {
					title: '',
					type: '',
					description: '',
					contact: '',
					address: '',
					image: ''
				},
				ticketTypes: ['网络问题', '硬件故障', '软件使用', '账户问题', '其他问题']
			}
		},
		onLoad() {
			// 不再检查用户登录状态
		},
		methods: {
			onTypeChange(e) {
				this.formData.type = this.ticketTypes[e.detail.value];
			},
			
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.formData.image = res.tempFilePaths[0];
					}
				})
			},
			
			removeImage() {
				this.formData.image = '';
			},
			
			// 工单标题输入处理
			onTitleInput(e) {
				this.formData.title = e.detail.value;
			},
			
			// 问题描述输入处理
			onDescriptionInput(e) {
				this.formData.description = e.detail.value;
			},
			
			// 联系方式输入处理
			onContactInput(e) {
				this.formData.contact = e.detail.value;
			},
			
			// 服务地址输入处理
			onAddressInput(e) {
				this.formData.address = e.detail.value;
			},
			
			// 提交工单
			async submitTicket() {
				// 表单验证
				if (!this.formData.title) {
					uni.showToast({
						title: '请输入工单标题',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.type) {
					uni.showToast({
						title: '请选择问题类型',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.description) {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none'
					});
					return;
				}
				
				if (!this.formData.contact) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				try {
					// 调用创建工单接口
					const res = await createTicket(this.formData);
					
					if (res.code === 0) {
						uni.showToast({
							title: '工单提交成功',
							icon: 'success'
						});
						
						// 返回我的工单页面
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/customer/my-tickets/my-tickets'
							});
						}, 1500);
					} else {
						// 提交失败，显示错误信息
						uni.showToast({
							title: res.message || '提交失败',
							icon: 'none'
						});
					}
				} catch (error) {
					// 网络或其他异常
					console.error('提交工单失败:', error);
					uni.showToast({
						title: '提交失败: ' + (error.msg || error.message || '未知错误'),
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	.create-ticket-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.page-header {
		text-align: center;
		padding: 40rpx 0;
		margin-bottom: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
		color: #333;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #999;
	}
	
	.form-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-group {
		margin-bottom: 40rpx;
	}
	
	.label {
		font-size: 30rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
		color: #333;
	}
	
	.input, .textarea {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	
	.input {
		height: 80rpx;
	}
	
	.textarea {
		height: 200rpx;
	}
	
	.short-textarea {
		height: 80rpx;
	}
	
	.picker-content {
		padding: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		color: #999;
	}
	
	.placeholder {
		color: #ccc;
	}
	
	.upload-container {
		padding: 20rpx 0;
	}
	
	.upload-area {
		border: 1rpx dashed #ddd;
		border-radius: 10rpx;
		padding: 40rpx 0;
		text-align: center;
	}
	
	.upload-icon {
		font-size: 60rpx;
		color: #007AFF;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.upload-text {
		color: #999;
		font-size: 28rpx;
	}
	
	.image-preview {
		position: relative;
		display: inline-block;
	}
	
	.preview-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	
	.remove-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	
	.form-actions {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	.submit-btn, .cancel-btn {
		flex: 1;
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 32rpx;
	}
	
	.submit-btn {
		background-color: #007AFF;
		color: white;
		border: none;
	}
	
	.submit-btn:disabled {
		background-color: #cccccc;
	}
	
	.cancel-btn {
		background-color: white;
		color: #666;
		border: 1rpx solid #ddd;
	}
</style>